<template>
    <div class="wChatPage flex_column">
        <div class="titleVue flex_between align_center">
            <div class="title">微信列表</div>
            <div class="createBtn" @click="toCreate()">添加</div>
        </div>
       
        <!-- 微信列表 -->
        <div class="wChatContent flex_1">
            <el-table :data="list" height="100%" border width="100%" class="center-table">

                <!-- 列表为空 -->
                <div slot="empty" class="flex_column align_center">
                    <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                    <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                    <div style="color: #8F959E; padding-top: 15px">点击右上角的添加，绑定您的微信吧</div>
                </div>

                <!-- 微信名称 -->
                <!-- <el-table-column prop="id" label="ID" width="40"></el-table-column> -->
  
                <!-- 微信名称 -->
                <el-table-column prop="wechatName" label="微信名称" width="140"></el-table-column>

                <!-- 微信状态 -->
                <el-table-column prop="status" align="center" label="微信状态" width="120">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status===1" style="color: #0147fd; font-size: 13px; font-weight: 600;">在线</div>
                        <div v-else style="font-size: 13px;">离线，<span style="color: #0147fd; cursor: pointer;  font-size: 13px; font-weight: 600;" @click="scanFun(scope.row)">扫码登录</span></div>
                    </template>
                </el-table-column>

                <!-- AI 客服描述 -->
                <el-table-column prop="name" align="center" label="AI客服描述" :show-overflow-tooltip="true"></el-table-column>

                <!-- AI角色模型 -->
                <el-table-column prop="promptName" align="center" label="AI角色模型" :show-overflow-tooltip="true" width="130"></el-table-column>

                 <!-- 私聊开场白 -->
                 <el-table-column prop="openingRemarks" align="center" label="私聊开场白" :show-overflow-tooltip="true"></el-table-column>

                 <!-- 群聊开场白 -->
                 <el-table-column prop="groupOpeningRemarks" align="center" label="群聊开场白" :show-overflow-tooltip="true"></el-table-column>

                 <!-- AI自动回复 -->
                <el-table-column prop="aiStatus" label="AI自动回复" width="100">
                    <template slot-scope="scope">
                        <div class="state" :class="{active: scope.row.aiStatus}" @click="handleAiStatus(scope.row)">
                            <div class="dot dot_right" v-if="scope.row.aiStatus===1"></div>
                            <div class="dot dot_left" v-else></div>
                        </div>
                    </template>
                </el-table-column>

                <!-- 关联知识库 -->
                <el-table-column prop="datasetName" label="关联知识库" width="200">
                    <template slot-scope="scope">
                        <el-tag type="info" v-if="scope.row.datasetName">{{ scope.row.datasetName }}</el-tag>
                        <span v-else style="color: #333; font-size: 13px;">未关联知识库</span>
                    </template>
                </el-table-column>
            
                <!-- 操作 -->
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <div class="flex_center">
                            <el-button size="mini" type="edit" @click="handleEdit(scope.row)">管理</el-button>
                            <el-button size="mini" type="delete" @click="handleDelete(scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="paginationVue flex_center align_center">
            <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
        </div>


        <!-- 添加微信客服 -->
        <el-dialog title="添加微信客服" :visible.sync="dialogTableVisible" :show-close="true" :center="true" top="8vh" @close="close" :close-on-click-modal="false">
            <div class="dialogVue">
                <div class="stepVue flex_center">
                    <div class="flex_column align_center flex_1">
                        <div class="dot" :class="{active: current===1}">1</div>
                        <span :class="{textActive: current===1}">设置AI客服</span>
                    </div>
                    <div class="line"></div>
                    <div class="flex_column align_center flex_1">
                        <div class="dot" :class="{active: current===2}">2</div>
                        <span :class="{textActive: current===2}">AI模型选择</span>
                    </div>
                    <div class="line"></div>
                    <div class="flex_column align_center flex_1">
                        <div class="dot" :class="{active: current===3}">3</div>
                        <span :class="{textActive: current===3}">绑定微信号</span>
                    </div>
                </div> 
                <template v-if="current===2">
                    <div class="inpVue" style="margin-top: 20px">
                        <div class="label">AI角色模型选择</div>
                        <div class="selectVue flex_wrap flex_between">
                            <div class="select" v-for="(item, index) in promptList" :key="index" :class="{active: modelId===item.id}" @click="modelId=item.id">
                                <div class="flex" style="padding-bottom: 10px">
                                    <span style="color: #101010; font-size: 12px; font-weight: 600;">{{ item.name }}</span>
                                    <span style="color: #101010; font-size: 12px; font-weight: 600; padding: 0 10px">{{ item.sex }}</span>
                                    <span style="color: #101010; font-size: 12px; font-weight: 600;">{{ item.age }}岁</span>
                                </div>
                                <div class="li">{{ item.answerMethod }}</div>
                                <div class="li">{{ item.style }}</div>
                                <div class="li">{{ item.language }}</div>
                            </div>
                        </div>
                    </div>
                    <div class="inpVue" style="margin-top: 10px;">
                        <div class="flex_between align_center">
                            <div class="label">开启AI回复</div>
                            <el-switch v-model="aiStatus" inactive-color="#999" active-color="#0147fd"></el-switch>
                        </div>
                        <div style="font-size: 12px; color: #999; padding-top: 10px;">关闭后，AI 将不会对客户回复消息</div>
                    </div> 
                    <div class="flex_center margin30">
                        <div class="createBtn" style="background: #0147fd;" @click="current=1">上一步</div>
                        <div style="width: 10px;"></div>
                        <div class="createBtn" :class="{active: modelId}" @click="nextFun(2)">
                            <span class="el-icon-loading" v-if="loading" style="color: #fff;"></span>
                            <span v-else style="color: #fff;">下一步</span>
                        </div>
                    </div> 
                </template>

                <template v-if="current===3">
                    <div class="h8 text_center">使用微信扫码绑定AI客服</div>
                    <div class="code margin20 flex_center align_center">
                        <img :src="$store.state.loginCode" style="width: 100%; height: 100%;" v-if="$store.state.loginCode">
                        <span class="el-icon-loading" v-else></span>
                    </div>
                    <div class="btn margin40" @click="logCode">重新获取二维码</div> 
                </template>

                <template v-if="current===1">
                    <div class="inpVue" style="margin-top: 40px">
                        <div class="label">AI客服描述</div>
                        <textarea placeholder="输入客服的介绍描述词，生成效果会更好" v-model="name" maxlength="-1"></textarea>
                    </div>
                    <div class="inpVue">
                        <div class="flex_between align_center">
                            <div class="label">私聊开场白(添加微信好友后，将自动给用户发送开场白)</div>
                            <el-switch v-model="openingStatus" inactive-color="#999" active-color="#0147fd"></el-switch>
                        </div>
                        <textarea placeholder="我是【客服名称】，很高兴为您服务。无论您有任何问题或需要帮助，都可以直接发送消息。我会尽快为您提供解答和协助。" v-model="openingRemarks" maxlength="-1"></textarea>
                    </div>
                    
                    <div class="inpVue">
                        <div class="flex_between align_center">
                            <div class="label">群聊开场白(群内有新成员入群后，将自动@对方并发送开场白)</div>
                            <el-switch v-model="groupOpeningStatus" inactive-color="#999" active-color="#0147fd"></el-switch>
                        </div>
                        <textarea placeholder="我是【客服名称】，很高兴为您服务。无论您有任何问题或需要帮助，都可以随时@我。我会尽快为您提供解答和协助。" v-model="groupOpeningRemarks" maxlength="-1"></textarea>
                    </div>
                    <div class="inpVue">
                        <div class="">
                            <div class="label" style="margin-bottom: 10px;">关联知识库</div>
                            <el-select v-model="datasetId" placeholder="请选择" filterable  style="width: 100%;" @change="handleChange">
                                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                                    <span style="color: #000;">{{ item.name }}</span>
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="createBtn margin40" style="background: #0147fd;" @click="nextFun(1)">下一步</div>
                </template>
            </div>
        </el-dialog>


        <!-- 编辑微信客服 -->
        <el-dialog title="编辑微信客服" :visible.sync="dialogTableVisible20" :show-close="true" :center="true" top="6vh" @close="close">
            <div class="dialogVue" style="height: 70vh; overflow: scroll;">
                <div class="inpVue" style="margin-top: 0;">
                    <div class="label">AI客服描述</div>
                    <textarea placeholder="输入客服的介绍描述词，生成效果会更好" v-model="name" maxlength="-1"></textarea>
                </div>
                <div class="inpVue">
                    <div class="flex_between align_center">
                        <div class="label">私聊开场白(添加微信好友后，将自动给用户发送开场白)</div>
                        <el-switch v-model="openingStatus" inactive-color="#999" active-color="#0147fd"></el-switch>
                    </div>
                    <textarea placeholder="我是【客服名称】，很高兴为您服务。无论您有任何问题或需要帮助，都可以直接发送消息。我会尽快为您提供解答和协助。" v-model="openingRemarks" maxlength="-1"></textarea>
                </div>
                <div class="inpVue">
                    <div class="flex_between align_center">
                        <div class="label">群聊开场白(群内有新成员入群后，将自动@对方并发送开场白)</div>
                        <el-switch v-model="groupOpeningStatus" inactive-color="#999" active-color="#0147fd"></el-switch>
                    </div>
                    <textarea placeholder="我是【客服名称】，很高兴为您服务。无论您有任何问题或需要帮助，都可以随时@我。我会尽快为您提供解答和协助。" v-model="groupOpeningRemarks" maxlength="-1"></textarea>
                </div>
                <div class="inpVue">
                    <div class="label" style="margin-bottom: 10px;">关联知识库</div>
                    <el-select v-model="datasetId" placeholder="请选择知识库" filterable  style="width: 100%;" @change="handleChange" :clearable="true">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                            <span style="color: #000;">{{ item.name }}</span>
                        </el-option>
                    </el-select>    
                </div>
                <div class="inpVue" style="margin-top: 20px">
                    <div class="label">AI角色模型选择</div>
                    <div class="selectVue flex_wrap flex_between" style="height: auto;">
                        <div class="select" v-for="(item, index) in promptList" :key="index" :class="{active: modelId===item.id}" @click="modelId=item.id">
                            <div class="flex" style="padding-bottom: 10px">
                                <span style="color: #101010; font-size: 12px; font-weight: 600;">{{ item.name }}</span>
                                <span style="color: #101010; font-size: 12px; font-weight: 600; padding: 0 10px">{{ item.sex }}</span>
                                <span style="color: #101010; font-size: 12px; font-weight: 600;">{{ item.age }}岁</span>
                            </div>
                            <div class="li">{{ item.answerMethod }}</div>
                            <div class="li">{{ item.style }}</div>
                            <div class="li">{{ item.language }}</div>
                        </div>
                    </div>
                </div>
                <div class="inpVue" style="margin-top: 10px;">
                    <div class="flex_between align_center">
                        <div class="label">开启AI回复</div>
                        <el-switch v-model="aiStatus" inactive-color="#999" active-color="#0147fd"></el-switch>
                    </div>
                    <div style="font-size: 12px; color: #999; padding-top: 10px;">关闭后，AI 将不会对客户回复消息</div>
                </div> 
                <div class="createBtn margin30" @click="editFun" style="background: #0147fd;">
                    <span class="el-icon-loading" v-if="loading" style="color: #fff"></span>
                    <span v-else style="color: #fff">确认</span>
                </div>                    
            </div>
        </el-dialog>


        <!-- 扫码登录 -->
        <el-dialog title="扫码登录" :visible.sync="dialogTableVisible10" :show-close="true" :center="true" top="25vh" @close="close" :close-on-click-modal="false">
            <div class="dialogVue">
                <div class="text_center" style="color: #111; font-weight: 600;">微信昵称：{{wechatName}}</div>
                <div class="code margin30 flex_center align_center">
                    <img :src="$store.state.loginCode" style="width: 100%; height: 100%;" v-if="$store.state.loginCode">
                    <span class="el-icon-loading" v-else></span>
                </div>
                <div class="h8 text_center">使用微信扫码登录AI客服</div>
                <!-- <div class="btn margin40" @click="getLoginCode">重新获取二维码</div> -->
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { toast } from '@/common/tools'
import { mapState } from "vuex"
export default {
    data(){
        return {
            list: [],
            total: 0,
            pageNum: 1,
            pageSize: 15,
            current: 1,
            dialogTableVisible: false,
            dialogTableVisible10: false,
            dialogTableVisible20: false,
            name: "",  //AI客服描述
            modelId: "",  //AI角色模型Id
            status: false,   //在线状态
            aiStatus: true,  //自动回复状态
            loading: false,
            id: "",   //列表Id
            datasetId: "", //知识库Id
            datasetName: "", //知识库名称
            loginCode: "",  //登录二维码
            wechatId: "", //微信Id
            active: 1,  //AI 角色模型选择
            promptList: [],
            openingStatus: false,  //私聊开场白状态
            openingRemarks: "",   //私聊开场白内容
            groupOpeningStatus: false, //群开场白状态
            groupOpeningRemarks: "", // 群开场白内容
            options: [],
            wechatName: "",
        }
    },

    created(){
        this.getList()
    },

    computed: {
        ...mapState({
            loginRandom: state=> state.loginRandom,
            loginoutRandom: state=> state.loginoutRandom,
        })
    },

    watch: {
        // 监控微信扫码登录
        loginRandom(){
            toast(0, "登录成功")
            this.close()
            setTimeout(() => {
                this.getList()
            }, 1000); 
        },

        //监控退出微信登录
        loginoutRandom(){
            console.log("loginoutRandom")
            setTimeout(() => {
                this.getList()
            }, 1000); 
        }
    },
    methods: {
        nextFun(index){
            switch(index){
                case 1:
                    if(!this.name) return toast(1, "请输入AI客服描述")
                    if(this.openingStatus && !this.openingRemarks) return toast(1, "请输入私聊开场白")
                    if(this.groupOpeningStatus && !this.groupOpeningRemarks) return toast(1, "请输入群聊开场白")
                    this.current = 2
                break;
                case 2:
                    if(!this.modelId)  return toast(1, "请选择AI角色模型")
                    if(this.loading) return
                    this.loading = true
                    this.$post("/front/userWechat/createWechat", {
                        name: this.name,
                        promptId: this.modelId,  //AI模板选择
                        openingRemarks: this.openingRemarks, //开场白
                        groupOpeningStatus: this.groupOpeningStatus ? 1 : 0,
                        groupOpeningRemarks: this.groupOpeningRemarks,
                        aiStatus: this.aiStatus ? 1 : 0,
                        openingStatus: this.openingStatus ? 1 : 0,
                        datasetId: this.datasetId,
                    }).then(res=>{
                        this.loading = false
                        if(res.data.code===0) {
                            this.current = 3
                            this.getList()
                            this.$store.state.weChatSelectId = res.data.obj.id
                            this.logCode(res.data.obj.id)
                        } else {
                            toast(1, res.data.msg)
                        }
                    })
                break;
            }
        },

        // 查询微信列表
        getList(){
            console.log("查询微信列表")
            this.$post("/front/userWechat/wechatList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.total = res.data.obj.total 
                    this.getRepositoryList()
                }
            })
        },

        // 获取知识库列表
        getRepositoryList(){
            this.$post("/front/dataset/datasetList", {
                pageNum: 1,
                pageSize: 1000
            }).then(res=>{
                console.log(res)
                this.options = res.data.obj.list
            })
        },
        
        // 添加微信客服
        toCreate(){
            this.dialogTableVisible=true
            this.getPromptWord()
            this.openingRemarks = "我是【客服名称】，很高兴为您服务。无论您有任何问题或需要帮助，都可以直接发送消息。我会尽快为您提供解答和协助。"
            this.groupOpeningRemarks = "我是【客服名称】，很高兴为您服务。无论您有任何问题或需要帮助，都可以随时@我。我会尽快为您提供解答和协助。"
        },

        // 获取提示词列表
        getPromptWord(){
            this.$post("/front/prompt").then(res=>{
                this.promptList = res.data.obj
                console.log(res)
            })
        },

         // 编辑弹框
         handleEdit(item){
            this.dialogTableVisible20 = true
            this.name = item.name
            this.modelId = item.promptId
            this.datasetName = item.datasetName
            this.datasetId = item.datasetId
            this.status = item.status
            this.id = item.id
            this.aiStatus = item.aiStatus === 1 ? true : false 
            this.openingRemarks = item.openingRemarks ? item.openingRemarks : "我是【客服名称】，很高兴为您服务。无论您有任何问题或需要帮助，都可以直接发送消息。我会尽快为您提供解答和协助。"
            this.openingStatus = item.openingStatus === 1 ? true : false
            this.groupOpeningStatus = item.groupOpeningStatus === 1 ? true : false,
            this.groupOpeningRemarks = item.groupOpeningRemarks ? item.groupOpeningRemarks : "我是【客服名称】，很高兴为您服务。无论您有任何问题或需要帮助，都可以随时@我。我会尽快为您提供解答和协助。"
            this.getPromptWord()
        },

        // 编辑微信客服
        editFun(){
            if(!this.name) return toast(1, "请输入AI客服描述")
            if(this.openingStatus && !this.openingRemarks) return toast(1, "请输入私聊开场白")
            if(this.groupOpeningStatus && !this.groupOpeningRemarks) return toast(1, "请输入群聊开场白")
            if(this.loading) return
            this.loading = true
            this.$post("/front/userWechat/updateWechat", {
                name: this.name,
                promptId: this.modelId,  //AI模板选择
                openingRemarks: this.openingRemarks, //开场白
                groupOpeningStatus: this.groupOpeningStatus ? 1 : 0,
                groupOpeningRemarks: this.groupOpeningRemarks,
                aiStatus: this.aiStatus ? 1 : 0,
                openingStatus: this.openingStatus ? 1 : 0,
                datasetId: this.datasetId,
                id: this.id
            }).then(res=>{
                this.loading = false
                if(res.data.code===0) {
                    this.close()
                    toast(0, "修改成功")
                    this.getList()
                } else {
                    toast(1, res.data.msg)
                }
            })
        },

        // 删除微信客服
        handleDelete(item){
            this.$alert(`确认删除微信${item.wechatName}?`, '删除微信', {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    console.log(action)
                    if(action==="confirm") {
                        //删除微信代码
                        this.$post("/front/userWechat/deleteWechat", {
                            ids: item.id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, "删除成功") 
                                this.getList()
                            } else {
                                toast(1, res.data.msg)
                            }
                        })
                    }
                }
            });
        },

        // 选取知识库
        handleChange(e){
            this.datasetId = e
        },

        // AI自动回复开关
        handleAiStatus(item){
            this.$alert(`确认${item.aiStatus===1?"关闭":"开启"}${item.wechatName}的微信AI自动回复?`,  `${item.aiStatus===1?"关闭":"开启"}AI自动回复`, {
                confirmButtonText: '确定',
                confirmButtonClass: 'confirmButtonClass',
                cancelButtonText: '取消',
                showCancelButton: true,
                showClose: false,
                callback: action => {
                    if(action==="confirm") {
                        //AI自动回复开关代码
                        this.$post("/front/userWechat/updateWechat", {
                            name: item.name,
                            promptId: item.promptId,  //AI模板选择
                            openingRemarks: item.openingRemarks, //开场白
                            groupOpeningStatus: item.groupOpeningStatus ? 1 : 0,
                            groupOpeningRemarks: item.groupOpeningRemarks,
                            aiStatus: item.aiStatus ? 0 : 1,
                            openingStatus: item.openingStatus ? 1 : 0,
                            datasetId: item.datasetId,
                            id: item.id
                        }).then(res=>{
                            if(res.data.code===0) {
                                toast(0, item.aiStatus===0?"AI自动回复已开启":"AI自动回复已关闭")
                                this.getList()
                            } else {
                                toast(1, res.data.msg)
                            }
                        })
                    }
                }
            });
        },

        // 扫码登录
        scanFun(item){
            this.dialogTableVisible10 = true;
            this.id = item.id
            this.wechatName = item.wechatName
            this.$store.state.weChatSelectId = item.id
            this.getLoginCode()
        },

        // 登录
        logCode(id){
            this.$post("/front/userWechat/getQrcode", {
                id: id
            }).then(res=>{
                // if(res.data.code===0) {
                //     this.loading = false
                //     this.loginCode = "data:image/png;base64," + res.data.obj.qrcode
                // }else{
                    if(res.data.code===-1 && res.data.msg==="请稍候再试") {
                        setTimeout(() => {
                            this.logCode(id)
                        }, 2000);
                    }  
                // } 
            })
        },

        // 重新登录
        getLoginCode(){
            this.loading = true
            this.$post("/front/userWechat/reLogin", {
                bindWeChatId: this.id
            }).then(res=>{
                if(res.data.code===0) {
                    this.loading = false
                }else{
                    if(res.data.code===-1 && res.data.msg==="请稍候再试") {
                        setTimeout(() => {
                            this.getLoginCode()
                        }, 2000);
                    }  
                }
            })
        },

        // 重置
        close(){
            this.dialogTableVisible = false
            this.dialogTableVisible10 = false
            this.dialogTableVisible20 = false
            this.name = ""
            this.wechatName = ""
            this.modelId = ""
            this.groupOpeningStatus = false
            this.groupOpeningRemarks = ""
            this.status = 0
            this.aiStatus = true
            this.openingRemarks = ""
            this.openingStatus = false
            this.current = 1
            this.datasetId = ""
            this.datasetName = ""
            this.id = ""
            this.$store.state.loginCode = ""
            this.$store.state.weChatSelectId = ""
        },

        // 翻页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getList()
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.center-table td), 
:deep(.center-table th) {
    text-align: center !important;
}
:deep(.center-table th) {
    background: #f5f5f5 !important;
}
:deep(.el-table .cell) {
    font-size: 13px !important;
}
:deep(.el-dialog) {
    width: 620px;
    height: auto;
    border-radius: 10px;
}
:deep(.el-dialog__title) {
    color: #111;
    font-size: 16px;
    font-weight: 600;
}
:deep(.el-dialog__header) {
    padding: 20px 0 0;
}
:deep(.el-dialog__body) {
    padding: 30px 20px;
}
:deep(.el-input__inner) {
    height: 50px;
}
:deep(.el-button--delete) {
    background: #d81e06;
    span {
        color: #fff !important;
        font-size: 13px;
    }
}
:deep(.el-button--edit) {
    background: #0147fd;
    span {
        color: #fff !important;
    }
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #0147fd;
    background: #0147fd;
}
:deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #0147fd;
}
:deep(.el-tag--info) {
    color: #333;
    font-size: 13px;
}
.wChatPage {
    width: 100%;
    height: 100%;
    padding: 20px 20px 0;
    .titleVue {
        width: 100%;
        .title {
            color: #111;
            font-size: 18px;
            font-weight: 600;
        }
        .createBtn {
            width: 80px;
            height: 36px;
            background: #0147fd;
            border-radius: 4px;
            text-align: center;
            line-height: 36px;
            font-weight: 600;
            cursor: pointer;
            color: #fff;
            font-size: 15px;
            
         }
    }
    .wChatContent {
        width: 100%;
        margin-top: 10px;
        .state {
            width: 40px;
            height: 20px;
            background: #AAA;
            border-radius: 10px;
            margin: 0 auto;
            position: relative;
            cursor: pointer;
            .dot {
                width: 16px;
                height: 16px;
                background: #fff;
                border-radius: 50%;
                position: absolute;
            }
            .dot_left {
                left: 2px;
                top: 2px;
            }
            .dot_right {
                right: 2px;
                top: 2px;
            }
        }
        .active {
            background: #0147fd;
        }
    }
    .paginationVue {
        width: 100%;
        height: 60px;
    }
}
.dialogVue {
    width: 100%;
    border-radius: 5px;
    .stepVue {
        width: 100%;
        .dot {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background: #EEE;
            line-height: 25px;
            text-align: center;
            color: #999;
            margin-bottom: 10px;
        }
        .active {
            background: #0147fd;
            color: #fff;
        }
        .line {
            width: 100px;
            height: 1px;
            background: #EEE;
            margin-top: 12px;
        }
        span {
            color: #999;
            font-size: 12px;
        }
        .textActive {
            color: #0147fd;
            font-weight: 600; 
        }
    }
    .h8 {
        padding-top: 50px;
        color: #606266;
    }
    .code {
        width: 200px;
        height: 200px;
        background: #f5f5f5;
        border-radius: 4px;
        span {
            font-size: 28px;
        }
    }
    .btn {
        width: 200px;
        height: 38px;
        border-radius: 6px;
        line-height: 38px;
        text-align: center;
        color: #fff;
        text-align: center;
        background: #0147fd;
        cursor: pointer;
    }
    .createBtn {
        width: 200px;
        height: 38px;
        border-radius: 6px;
        line-height: 38px;
        text-align: center;
        text-align: center;
        background: #999;
        cursor: pointer;
        color: #fff;
    }
    .active {
        background: #0147fd;
    }
    .inpVue {
        width: 100%;
        margin-top: 20px;
        .label {
            color: #333;
            font-size: 12px;
        }
        .selectVue {
            width: 100%;
            height: 400px;
            margin-top: 10px;
            overflow: scroll;
            .select {
                width: 285px;
                height: 120px;
                border-radius: 6px;
                border: 1px solid #EEE;
                margin-bottom: 10px;
                cursor: pointer;
                padding: 10px;
            }
            .active {
                border: #0147fd 1px solid;
                background: rgba(1,71,253, 0.1);
            }
            .li {
                font-size: 12px;
                color: #444;
                padding-top: 6px;
                line-height: 1.2;
            }
        }
        .selectVue::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        textarea {
            width: 100%;
            height: 60px;
            border: #DCDFE6 1px solid;
            display: block;
            box-sizing: border-box;
            resize: none;
            border-radius: 4px;
            margin-top: 10px;
            font-family: PingFangSC, PingFang SC;
            padding: 10px;
            font-size: 13px;
            line-height: 1.4;
        }
        ::-webkit-input-placeholder { /* WebKit browsers */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        :-ms-input-placeholder { /* Internet Explorer 10+ */
            color: #AAA;
            font-size: 13px;
            font-family: PingFangSC, PingFang SC;
        }
        textarea::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
    }
}
.dialogVue::-webkit-scrollbar {
    width: 0;
    height: 0;
}
</style>